<!-- 组件说明 -->
<template>
  <div class="purseIndex">
    <goback :title="'SPORTS STATISTICS'" :ifTransparent="false"></goback>
    <div class="container clearfix">
      <div class="center">
        <div id="echartsWrap">

        </div>
        <div class="content" v-for="(item, index) in pageListArr" :key="index">
          <div class="monthTitle">
            {{ item.month }}
          </div>
          <div
            class="li"
            v-for="(item2, index2) in item.detailVo"
            :key="'inner' + index2"
          >
            <p>{{ item2.dayFromat }}</p>
            <div class="wrap">
              <span>{{ item2.walkKilometer }} Km</span>
              <span>{{ item2.walkCalories }} Kcal</span>
              <span>{{ item2.walk }} Steps</span>
            </div>
          </div>
        </div>

        <p
          @click="checkMore"
          :class="timestamp ? 'haveMore moreBtn' : 'moreBtn'"
        >
          {{ timestamp ? "More" : "No More" }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { ifLogin, utilGotoLogin } from "@/utils/index.js";
import { mapState } from "vuex";

import * as echarts from 'echarts/core';
import {
  GridComponent
} from 'echarts/components';
import {
  LineChart
} from 'echarts/charts';
import {
  CanvasRenderer
} from 'echarts/renderers';

echarts.use(
    [GridComponent, LineChart, CanvasRenderer]
);
export default {
  components: {
    // compSep
  },
  name: "percenterSports",
  data() {
    return {
      nickName: "Visitor",
      rightbtn: require("@/assets/imgNews/percenter/rightbtn.png"),
      rightBtnWhite: require("@/assets/imgNews/percenter/rightBtnWhite.png"),
      defaultPic: require("@/assets/imgs/index/defaultPic.png"),
      contentArrary: [
        {
          imgIcon: "",
          title: "Nickname",
          params: ""
        },
        {
          imgIcon: "",
          title: "Age",
          params: ""
        },
        {
          imgIcon: "",
          title: "Gender",
          params: ""
        }
      ],
      sexArr: ["male", "female"],

      uploadpicUrl: "", // 上传返给我的头像图片地址

      nickNameIptIfShow: false,
      nickNameIVal: "",
      ageValIfShow: false,
      ageVal: "",
      sexValIfShow: false,
      sexVal: "",
      timestamp: "",
      pageListArr: [],

      echartsOption:{
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          min:100,
          max:1944
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }]
      },
      myChart:''
    };
  },
  computed: mapState({
    // 箭头函数可使代码更简练
    userStoreData: state => state.user
  }),
  methods: {
    echartsInit(){
      echarts.init(document.getElementById('echartsWrap')).setOption(this.echartsOption);
    },
    checkMore() {
      this.pageInit();
    },
    ageConfirm(val) {
      this.ageValIfShow = false;
      this.ageVal = val;
      this.userUpdateUserinfoFn("age");
    },
    sexConfirm(val) {
      this.sexValIfShow = false;
      this.sexVal = val == "male" ? 1 : val == "female" ? 2 : "";
      this.userUpdateUserinfoFn("sex");
    },
    nickNameConfirm() {
      if (this.nickNameIVal) {
        this.nickNameIptIfShow = false;
        this.userUpdateUserinfoFn("nickName");
      }
    },
    initShow() {
      this.nickNameIptIfShow = false;
      this.ageValIfShow = false;
      this.sexValIfShow = false;
    },
    pageInit() {
      this.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      this.api.userController
        .userwalkStatistics({
          userId: this.userStoreData.userId,
          timestamp: this.timestamp
        })
        .then(res => {
          this.$toast.clear();
          if (res.data.code == 200) {
            console.log(res);
            if (this.timestamp) {
              this.pageListArr.push(...res.data.data.walkDetailVo);
            } else {
              this.pageListArr = res.data.data.walkDetailVo;
            }
            this.timestamp = res.data.data.nextMonthLastDay;

            let sevenDaysData = res.data.data.sevenDaysData;
            let xAxisArr=[];
            for (let i = 0; i < sevenDaysData.detailVo.length; i++) {
              xAxisArr.push(sevenDaysData.detailVo[i].dayFromat);
            }
            let seriesArr=[];
            for (let ii = 0; ii < sevenDaysData.detailVo.length; ii++) {
              seriesArr.push(sevenDaysData.detailVo[ii].walk);
            }
            this.echartsOption={
              xAxis: {
                type: 'category',
                data: xAxisArr
              },
              yAxis: {
                type: 'value',
                min:sevenDaysData.min,
                max:sevenDaysData.max
              },
              series: [{
                data: seriesArr,
                type: 'line',
                smooth: true
              }]
            },
            this.echartsInit();
          }
        });
    },
    userStoreDataShow() {
      this.contentArrary[0].params = this.userStoreData.nickName
        ? this.userStoreData.nickName
        : "---";
      this.contentArrary[1].params = this.userStoreData.age
        ? this.userStoreData.age
        : "0";
      this.contentArrary[2].params = this.userStoreData.sex
        ? this.userStoreData.sex
        : "--";
    },
    gotoEdit() {
      this.$router.push({
        name: "percenterEidt"
      });
    },
    ifLoginFn() {
      return ifLogin();
    },
    headerClickFn() {},
    gotoLogin() {
      utilGotoLogin();
    },
    contentFn(title) {
      if (!ifLogin()) {
        utilGotoLogin();
      } else {
        console.log(title);
        this.initShow(); //隐藏所有弹窗
        if (title === "Nickname") {
          this.nickNameIptIfShow = true;
        } else if (title === "Age") {
          this.ageValIfShow = true;
        } else if (title === "Gender") {
          this.sexValIfShow = true;
        }
      }
    },
    // 路有跳转
    goto(name) {
      this.$router.push({
        name
      });
    },
    fnstop() {
      return false;
    }
  },
  mounted() {
    this.timestamp = "";
    this.pageInit();
    window.setImageUrl = url => {
      alert("图片上传地址 url=" + url);
      this.uploadpicUrl = url;

      this.userUpdateUserinfoFn("avatar");
    };
    this.userStoreDataShow();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  created(){
    // 接下来的使用就跟之前一样，初始化图表，设置配置项
    // this.myChart = echarts.init(document.getElementById('echartsWrap'));

  },
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
@import url("./../../../assets/css/common.less");
@import url("./percenter-sports.less");
</style>
